<template>
    <div id="wrap">
        <Header></Header>
        <HeaderNav :headerlist="headerlist"></HeaderNav>
        <div id="navigation">
            <div class="container">
                <a href="">首页</a>
                <i> > </i>
                <!-- <a href="" v-for="item in ShopDetail.categories">{{item.name}}</a> -->
                <!-- <a href="">{{ShopDetail.categories[1].name}}</a> -->
                <!-- <a href="">{{ShopDetail.categories[0].parent.name}}</a> -->
                <i> > </i>
                <!-- <a href="">{{ShopDetail.categories[0].name}}</a> -->
                <i> > </i>
                <a href="">{{ShopDetail.name}}</a>
            </div>
        </div>
        <div class="shop_detail">
            <div class="container">
                <div class="detail">
                    <div class="left">
                        <div class="image">
                            <div ref="imgs" class="big_image" @mouseover="showimage = true"
                                @mouseout="showimage = false" @mousemove="layermove($event)">
                                <img :src="BigImage" alt="">
                                <div class="layer" :style="{ left: moveleft + 'px', top: movetop + 'px' }"
                                    v-show="showimage">
                                </div>
                            </div>
                            <ul class="small_image">
                                <li v-for="item, index in ShopDetail.mainPictures" :class="{ hover: BigImage == item }"
                                    @mouseover="BigImage = item">
                                    <img :src="item" alt="">
                                </li>
                            </ul>
                            <div class="large_image" v-if="showimage">
                                <div>
                                    <img :src="BigImage" alt=""
                                        :style="{ left: -moveleft * 2 + 'px', top: -movetop * 2 + 'px' }">
                                </div>
                            </div>
                        </div>
                        <ul class="sales">
                            <li>
                                <p>销量人气</p>
                                <p>200+</p>
                                <p>销量人气</p>
                            </li>
                            <li>
                                <p>商品评价</p>
                                <p>400+</p>
                                <p>查看评价</p>
                            </li>
                            <li>
                                <p>收藏人气</p>
                                <p>600+</p>
                                <p>收藏商品</p>
                            </li>
                            <li>
                                <p>品牌信息</p>
                                <p>苏宁电器</p>
                                <p>品牌主页</p>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                        <p class="shop_name">{{ ShopDetail.name }}</p>
                        <p class="shop_desc">{{ ShopDetail.desc }}</p>
                        <p class="shop_price"><span>￥{{ ShopDetail.price }}</span><span>￥{{ ShopDetail.oldPrice }}</span>
                        </p>
                        <div class="service">
                            <dl>
                                <dt>促销</dt>
                                <dd>12月好物放送，App领券购买直降120元</dd>
                            </dl>
                            <dl>
                                <dt>配送</dt>
                                <dd>至<div><span>北京市</span><span>市辖区</span><span>东城区</span></div>
                                </dd>
                            </dl>
                            <dl>
                                <dt>服务</dt>
                                <dd>
                                    <span>无忧退货</span>
                                    <span>快速退款</span>
                                    <span>免费包邮</span>
                                    <a href="">了解详情</a>
                                </dd>
                            </dl>
                        </div>
                        <div class="sku">
                            <dl v-for="item in ShopDetail.specs">
                                <dt>{{ item.name }}</dt>
                                <dd>
                                    <img v-for="i in item.values" :src="i.picture" alt="" :title="i.name"
                                        v-if="i.picture" @click="selectSku(i, item.values)"
                                        :class="{ hover_border: i.checked, disabled: i.disabled }">
                                    <span v-else @click="selectSku(i, item.values)"
                                        :class="{ hover_border: i.checked, disabled: i.disabled }">{{ i.name }}</span>
                                </dd>
                            </dl>
                        </div>
                        <div class="number">
                            <div>数量</div>
                            <div>
                                <span @click="num > 1 && num--">-</span>
                                <input type="text" v-model="num">
                                <span @click="num++">+</span>
                            </div>
                        </div>
                        <button @click="addshopcar">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="shop_relevant">
            <div class="container">
                <div class="head">
                    <span>同类商品推荐</span>
                </div>
                <div class="carousel">
                    <ul>
                        <li>
                            <div class="slider">
                                <a href="javascript:;" v-for="item in relevantList.slice(n, n + 4)">
                                    <img :src="item.picture" alt="">
                                    <p>{{ item.name }}</p>
                                    <p>{{ item.price }}</p>
                                </a>
                            </div>
                        </li>
                    </ul>
                    <a href="javascript:;" class="left" @click="left()">左</a>
                    <a href="javascript:;" class="right" @click="right()">右</a>
                    <div class="page">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="shop_footer">
            <div class="container">
                <div class="article">
                    <div class="tabs">
                        <nav>
                            <a href="javascript:;">商品详情</a>
                            <a href="javascript:;">商品评价</a>
                        </nav>
                        <div class="detail">
                            <ul>
                                <!-- <li v-for="item in ShopDetail.details.properties">
                                    <span>{{ item.name }}</span>
                                    <span>{{ item.value }}</span>
                                </li>
                                <img v-for="item in ShopDetail.details.pictures" :src="item" alt=""> -->
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="aside">
                    <div class="hot">
                        <h3>24小时热销榜</h3>
                        <div>
                            <a href="javascript:;" v-for="item in hot1">
                                <img :src="item.picture" alt="">
                                <p>{{ item.name }}</p>
                                <p>{{ item.desc }}</p>
                                <p>￥{{ item.price }}</p>
                            </a>
                        </div>
                    </div>
                    <div class="hot">
                        <h3>周热销榜</h3>
                        <div>
                            <a href="javascript:;" v-for="item in hot2">
                                <img :src="item.picture" alt="">
                                <p>{{ item.name }}</p>
                                <p>{{ item.desc }}</p>
                                <p>￥{{ item.price }}</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '@/page/Main/Header'
import HeaderNav from '@/page/Main/HeaderNav'
export default {
    components: {
        Header,
        HeaderNav,
    },
    data() {
        return {
            ShopDetail: [],
            pictureList: [],
            headerlist: [],
            showimage: false,
            BigImage: '',
            moveleft: 0,
            movetop: 0,
            hot1: [],
            hot2: [],
            relevantList: [],
            n: 0,
            num: 1,
            cartList: []
        }
    },
    methods: {
        layermove(e) {
            // console.log(e.clientX,e.clientY);
            var top = this.$refs.imgs.getBoundingClientRect().top
            var left = this.$refs.imgs.getBoundingClientRect().left
            this.moveleft = e.clientX - left - 100
            this.movetop = e.clientY - top - 100

            if (this.moveleft < 0) {
                this.moveleft = 0
            }
            if (this.moveleft > 200) {
                this.moveleft = 200
            }
            if (this.movetop < 0) {
                this.movetop = 0
            }
            if (this.movetop > 200) {
                this.movetop = 200
            }
        },
        left() {
            this.n -= 4
            if (this.n == -4) {
                this.n = 12
            }

        },
        right() {
            this.n += 4
            if (this.n == 16) {
                this.n = 0
            }
            // console.log(this.n);
        },
        // 规格点击添加边框 及计算库存
        selectSku(i, arr) {
            // 修改i的checked属性，并且将item.values内的其他对象的checked变成false
            if (i.disabled == false) {
                arr.forEach(k => {
                    if (k == i) {  // 排他时，如果是当前点击的元素
                        i.checked = !i.checked;  // 当前点击的对象的checked取反
                    } else {
                        k.checked = false
                    }
                })
                // console.log(arr);

                // vue数据变化，但是视图不更新（因为对象或数组没有使用vue内置的操作方法）内置的操作（变异）方法push  pop splice slice
                this.ShopDetail.specs = this.ShopDetail.specs.slice(0)

                // 计算库存
                var skusArr = [];
                for (var j = 0; j < this.ShopDetail.skus.length; j++) {
                    this.ShopDetail.skus[j].specs.forEach((key, index) => {
                        if (i.name == key.valueName) {
                            // 将点击的那个sku属性 的兄弟对象的 valueName 都放进skusArr中
                            this.ShopDetail.skus[j].specs.forEach((k, idx) => {
                                if (k.valueName != i.name) {
                                    skusArr.push(k.valueName)
                                }
                            })
                        }
                    })
                }
                // 在禁用之前，把所有的disabled都改成false（都不禁用，重新计算谁该禁用）
                // console.log(skusArr);
                this.ShopDetail.specs.forEach(i => {
                    i.values.forEach(item => {
                        item.disabled = false  // 表示不是禁用状态
                    })
                })
                // 找出点击的这个sku属性以外所有的属性，不包含在skusArr数组里面的都设置为true
                this.ShopDetail.specs.forEach(i => {
                    if (i.values != arr) {  // 点击颜色的话，就不处理颜色
                        i.values.forEach(k => {
                            if (skusArr.indexOf(k.name) == -1) {
                                k.disabled = true
                            }
                        })

                    }
                })
            }
        },
        addshopcar() {
            // console.log(this.$store.state.userInfor.setuserInfor.token);
            var arr = [];
            var skuid = ''
            this.ShopDetail.specs.forEach(item => {
                item.values.forEach(i => {
                    if (i.checked == true) {
                        arr.push(i.name)
                        // console.log(arr);
                    }
                })
            })
            this.ShopDetail.skus.forEach(item => {
                // console.log(item);
                var arrnew = [];
                item.specs.forEach(i => {
                    arrnew.push(i.valueName)
                })
                // console.log(arrnew);
                if (arr.toString() == arrnew.toString()) {
                    skuid = item.id
                }
            })

            var token = this.$store.state.userInfor.a.token
            // console.log(token);
            if (!token) {
                this.$router.push('/login')
            }
            if (arr.length == this.ShopDetail.specs.length) {
                this.axios({
                    method: 'POST',
                    url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart',
                    headers: {
                        Authorization: `Bearer ${token}`
                    },
                    data: {
                        count: this.num,
                        skuId: skuid
                    }
                }).then(res => {
                    // console.log(res);
                    if (res.data.msg == '操作成功') {
                        alert('加入成功')
                    }
                })
            } else {
                alert('请选择正确的规格')
            }


        }
    },
    mounted() {
        // this.axios.get('https://apipc-xiaotuxian-front.itheima.net/goods?id=3995415').then(res => {
        //     if (res.data.msg == '操作成功') {
        //         this.ShopDetail = res.data.result
        //         // console.log(this.ShopDetail.skus);
        //         this.ShopDetail.specs.forEach(item => {
        //             item.values.forEach(i => {
        //                 i.checked = false
        //                 i.disabled = false
        //                 // console.log(i);
        //             })
        //         })
        //         this.BigImage = res.data.result.mainPictures[0]

        //     }
        // })
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/goods?id=' + this.$route.params.id).then(res => {
            if (res.data.msg == '操作成功') {
                this.ShopDetail = res.data.result
                console.log(res.data.result);
                this.ShopDetail.specs.forEach(item => {
                    item.values.forEach(i => {
                        i.checked = false
                        i.disabled = false
                        // console.log(i);
                    })
                })
                this.BigImage = res.data.result.mainPictures[0]
            }
        })
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then(res => {
            if (res.data.msg == '操作成功') {
                this.headerlist = res.data.result  // 头部导航
                this.mainList = res.data.result  // 选项卡
            }
        })
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/goods/hot?id=3380014&limit=3&type=1').then(res => {
            if (res.data.msg == '操作成功') {
                this.hot1 = res.data.result
            }
        })
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/goods/hot?id=3380014&limit=3&type=2').then(res => {
            if (res.data.msg == '操作成功') {
                this.hot2 = res.data.result
            }
        })
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/goods/relevant?id=3380014&limit=16').then(res => {
            if (res.data.msg == '操作成功') {
                this.relevantList = res.data.result
                // console.log(this.relevantList.slice(0, 4));
            }
        })
        this.axios.get('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json').then(res => {

        })

    },
}
</script>

<style lang="scss" scoped>
// 面包屑导航
#navigation {
    display: flex;
    padding: 25px 10px;

    a {
        color: #666;
        transition: all .4s;
    }

    i {
        font-size: 12px;
        margin-left: 5px;
        margin-right: 5px;
        line-height: 22px;
    }
}
.shop_detail {
    .page {
        display: flex;
        padding: 25px 10px;
    }

    .detail {
        min-height: 600px;
        background: #fff;
        display: flex;

        .left {
            width: 580px;
            height: 600px;
            padding: 30px 50px;

            .image {
                width: 480px;
                height: 400px;
                position: relative;
                display: flex;
                z-index: 500;

                .big_image {
                    width: 400px;
                    height: 400px;
                    background: #f5f5f5;
                    position: relative;
                    cursor: move;

                    img {
                        max-width: 100%;
                        max-height: 100%;
                        vertical-align: middle;
                    }

                    .layer {
                        width: 200px;
                        height: 200px;
                        background: rgba(0, 0, 0, .2);
                        // left: 0;
                        // top: 0;
                        position: absolute;
                    }
                }

                .large_image {
                    position: absolute;
                    top: 0;
                    left: 412px;
                    overflow: hidden;
                    width: 400px;
                    height: 400px;
                    box-shadow: 0 0 10px rgb(0 0 0 / 10%);

                    // background-repeat: no-repeat;
                    // background-size: 800px 800px;
                    // background-color: #f8f8f8;
                    div {
                        position: relative;
                        width: 100%;
                        height: 100%;

                        img {
                            position: absolute;
                            width: 200%;
                            height: 200%;
                        }
                    }

                }

                .small_image {
                    width: 80px;

                    .hover {
                        border: 2px solid #27ba9b;
                    }

                    li {
                        width: 68px;
                        height: 68px;
                        margin-left: 12px;
                        margin-bottom: 15px;
                        cursor: pointer;

                        &:hover {
                            border: 2px solid #27ba9b;
                        }

                        img {
                            max-width: 100%;
                            max-height: 100%;
                            vertical-align: middle;
                        }
                    }
                }
            }

            .sales {
                display: flex;
                width: 400px;
                align-items: center;
                text-align: center;
                height: 140px;

                li {
                    flex: 1;
                    position: relative;

                    p {
                        &:nth-of-type(1) {
                            color: #999;
                        }

                        &:nth-of-type(2) {
                            color: #cf4444;
                            margin-top: 10px;
                        }

                        &:nth-of-type(3) {
                            color: #666;
                            margin-top: 10px;
                        }
                    }
                }
            }
        }

        .right {
            flex: 1;
            padding: 30px 30px 30px 0;

            .shop_name {
                font-size: 22px;
            }

            .shop_desc {
                color: #999;
                margin-top: 10px;
            }

            .shop_price {
                margin-top: 10px;

                span {
                    &:nth-of-type(1) {
                        color: #cf4444;
                        margin-right: 10px;
                        font-size: 22px;
                    }

                    &:nth-of-type(2) {
                        color: #999;
                        text-decoration: line-through;
                        font-size: 16px;
                    }
                }
            }

            .service {
                background: #f5f5f5;
                width: 500px;
                padding: 20px 10px 0 10px;
                margin-top: 10px;

                dl {
                    padding-bottom: 20px;
                    display: flex;
                    align-items: center;

                    dt {
                        width: 50px;
                        color: #999;
                    }

                    dd {
                        color: #666;
                    }

                    &:nth-of-type(2) {
                        dd {
                            display: flex;
                            align-items: center;

                            div {
                                border: 1px solid #e4e4e4;
                                height: 30px;
                                padding: 0 5px;
                                line-height: 28px;
                                cursor: pointer;
                                overflow: hidden;
                            }
                        }
                    }
                }

            }

            .sku {
                padding-left: 10px;
                padding-top: 20px;

                dl {
                    display: flex;
                    padding-bottom: 10px;
                    align-items: center;

                    dt {
                        width: 50px;
                        color: #999;
                    }

                    dd {
                        flex: 1;
                        color: #666;
                        line-height: 40px;

                        img {
                            width: 50px;
                            height: 50px;
                            margin-bottom: 5px;
                            border: 1px solid #e4e4e4;
                            margin-right: 10px;
                            cursor: pointer;
                        }

                        span {
                            display: inline-block;
                            height: 30px;
                            line-height: 28px;
                            padding: 0 20px;
                            border: 1px solid #e4e4e4;
                            margin-right: 10px;
                            cursor: pointer;
                        }

                        .hover_border {
                            border-color: #27ba9b;
                        }

                        .disabled {
                            opacity: .6;
                            border-style: dashed;
                            cursor: not-allowed;
                        }
                    }
                }
            }

            .number {
                display: flex;
                align-items: center;

                div {
                    &:nth-of-type(1) {
                        width: 60px;
                        color: #999;
                        padding-left: 10px;
                    }

                    &:nth-of-type(2) {
                        width: 120px;
                        height: 30px;
                        border: 1px solid #e4e4e4;
                        display: flex;

                        input {
                            width: 60px;
                            padding: 0 5px;
                            text-align: center;
                            color: #666;
                            border: none;
                        }

                        span {
                            width: 29px;
                            line-height: 28px;
                            text-align: center;
                            background: #f8f8f8;
                            font-size: 16px;
                            color: #666;

                            &:nth-of-type(1) {
                                border-right: 1px solid #e4e4e4;
                                cursor: pointer;
                                user-select: none;
                            }

                            &:nth-of-type(2) {
                                border-left: 1px solid #e4e4e4;
                                cursor: pointer;
                                user-select: none;
                            }
                        }
                    }
                }


            }

            button {
                border-color: #27ba9b;
                background: #27ba9b;
                color: #fff;
                width: 180px;
                height: 50px;
                font-size: 16px;
                text-align: center;
                border: 1px solid transparent;
                border-radius: 4px;
                cursor: pointer;
                margin-top: 20px;
            }
        }
    }
}

.shop_relevant {
    .container {
        background: #fff;
    }
}

.shop_relevant {

    min-height: 460px;
    margin-top: 20px;

    .head {
        height: 80px;
        line-height: 80px;
        padding: 0 20px;

        span {
            font-size: 20px;
            padding-left: 10px;
        }
    }

    .carousel {
        position: relative;
        height: 380px;

        ul {
            width: 100%;
            height: 100%;

            .fase {
                opacity: 1;
                z-index: 1;
            }

            li {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 1;
                transition: opacity .5s linear;

                .slider {
                    display: flex;
                    justify-content: space-around;
                    padding: 0 40px;

                    a {
                        width: 240px;
                        text-align: center;

                        img {
                            padding: 20px;
                            width: 230px !important;
                            height: 230px !important;
                        }

                        p {
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;

                            &:nth-of-type(1) {
                                font-size: 16px;
                                color: #666;
                                padding: 0 40px;
                            }

                            &:nth-of-type(2) {
                                font-size: 16px;
                                color: #cf4444;
                                margin-top: 15px;
                            }
                        }
                    }
                }
            }
        }

        .page {
            position: absolute;
            left: 0;
            bottom: 20px;
            z-index: 2;
            width: 100%;
            text-align: center;

            .active {
                background: #27ba9b;
            }

            span {
                display: inline-block;
                width: 12px;
                height: 12px;
                background: rgba(0, 0, 0, .2);
                border-radius: 50%;
                cursor: pointer;
                margin-left: 12px;
            }
        }

        .left {
            width: 44px;
            height: 44px;
            background: rgba(0, 0, 0, .2);
            color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 228px;
            z-index: 2;
            text-align: center;
            line-height: 44px;
            opacity: 0;
            transition: all .5s;
            top: 110px;
            opacity: 1;
            background: transparent;
            color: #ddd;
            left: 20px;
        }

        .right {
            right: 20px;
            width: 44px;
            height: 44px;
            background: rgba(0, 0, 0, .2);
            color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 228px;
            z-index: 2;
            text-align: center;
            line-height: 44px;
            opacity: 0;
            transition: all .5s;
            top: 110px;
            opacity: 1;
            background: transparent;
            color: #ddd;
        }
    }
}

.shop_footer .container {
    display: flex;
}

.shop_footer {

    margin-top: 20px;

    .article {
        width: 940px;
        margin-right: 20px;

        .tabs {
            min-height: 600px;
            background: #fff;

            nav {
                height: 70px;
                line-height: 70px;
                display: flex;
                border-bottom: 1px solid #f5f5f5;

                a {
                    padding: 0 40px;
                    font-size: 18px;
                    position: relative;

                    &:nth-of-type(1) {
                        border-right: 1px solid #f5f5f5;
                    }
                }
            }

            .detail {
                padding: 40px;

                ul {
                    display: flex;
                    flex-wrap: wrap;
                    margin-bottom: 30px;

                    li {
                        display: flex;
                        margin-bottom: 10px;
                        width: 50%;

                        span {
                            &:nth-of-type(1) {
                                width: 100px;
                                color: #999;
                            }

                            &:nth-of-type(2) {
                                flex: 1;
                                color: #666;
                            }
                        }
                    }
                }
            }
        }
    }
}

.aside {
    width: 280px;
    min-height: 1000px;

    .hot {

        h3 {
            height: 70px;
            background: #e26237;
            color: #fff;
            font-size: 18px;
            line-height: 70px;
            padding-left: 25px;
            margin-bottom: 10px;
            font-weight: 400;
        }

        div {
            a {
                background: #fff;
                width: 100%;
                margin-bottom: 10px;
                display: block;
                padding: 20px 30px;
                text-align: center;
                transition: all .5s;

                img {
                    width: 200px;
                    height: 200px;
                }

                p {
                    margin: 0 10px;
                    padding-top: 10px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;

                    &:nth-of-type(1) {
                        font-size: 16px;
                    }

                    &:nth-of-type(2) {
                        color: #999;
                        height: 29px;
                    }

                    &:nth-of-type(3) {
                        color: #cf4444;
                        font-size: 20px;
                    }
                }
            }
        }
    }
}
</style>